<template>
  <div>
    <div class="box">
      <ul>
        <li><div>水果店</div></li>
        <br />
        <li>
          <div>苹果{{ price }}￥/斤,折扣8折</div>
        </li>
        <br />
        <li>
          请输入你要买的斤数<input type="text" v-model="sum" />
          <button @click="sum++">+</button>
          <button @click="sum <= 1 ? sum : sum--">-</button>
        </li>
        <br />
        <li><button @click="all">结账买单</button></li>
        <br />
        <li>
          结账单:总价:{{ total }}￥元 折后价:{{ discount }}￥元 省了:{{
            count
          }}￥元
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      sum: 1,
      price: 10,
      total: 0,
      discount: 0,
      count: 0
    }
  },
  methods: {
    all () {
      this.total = this.sum * this.price
      this.discount = this.total * 0.8
      this.count = this.total - this.discount
    }
  }
}
</script>

<style scoped>
.box {
  margin: 100px 500px;
}
</style>
